<template>
  <section>
    <el-dialog
      title="批量导入"
      :visible.sync="open"
      width="500px"
      append-to-body
      @close="cancel"
      custom-class="dialog-import"
    >
      <div class="file-import">
        <Form :formData="formData" :rulesData="rulesData" >
          <template v-slot:file="">
            <el-upload
              class="uploader"
              :show-file-list="true"
              :http-request="handleRequest"
            >
              <i class="el-icon-plus uploader-icon" />
            </el-upload>
          </template>
        </Form>
        <div slot="footer" class="dialog-footer">
          <el-button
            v-for="(item, index) in formBtns"
            :key="index"
            @click="item.click"
            :type="item.type"
            :loading="loading"
            >{{ item.label }}</el-button
          >
        </div>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { Rule } from "@/utils/rule.js";
import Form from "@/components/form/index.vue";
import { listDept } from "@/api/system/dept";
import { importData } from "@/api/collect/collect/index";
export default {
  components: {
    Form,
  },
  data() {
    return {
      deptId: "",
      open: true,
      loading: false,
      formData: [
        {
          prop: "deptId",
          type: "select",
          value: "",
          options: [],
          label: "导入模板",
          change: (data) => {
            this.getTemplate(data.deptId);
          },
          placeholder: "请选择导入模板",
        },
        {
          prop: "file",
          type: "custom",
          label: "批量导入",
          slotName: "file",
        },
      ],
      rulesData: {
        deptId: [Rule.checkDataNull("请选择导入科室模板", ["blur", "change"])],
      },
      formBtns: [
        {
          label: "关闭",
          click: () => {
            this.$emit("onBack");
          },
        },
        {
          type: "primary",
          label: "批量导入",
          click: () => {
            this.handleSubmit();
          },
        },
      ],
      file: null,
    };
  },
  mounted() {
    this.getDeptList();
  },
  methods: {
    //查询科室列表
    getDeptList() {
      listDept({}).then((response) => {
        let data = response.data || [];
        let temp = [];
        data.forEach((item) => {
          item.label = item.deptName;
          item.value = item.deptId;
          if (item.deptId !== 100 && item.deptId !== 203) {
            temp.push(item);
          }
        });
        this.formData[0].options = temp;
      });
    },
    //获取模版信息
    getTemplate(deptId) {
      this.deptId = deptId;
      window.location.href = `${process.env.VUE_APP_BASE_API}/vendor/info/export_template?deptId=${deptId}`;
    },
    //上传成功
    handleRequest(e) {
      this.file = e.file;
    },
    //保存
    handleSubmit() {
      if (!this.deptId) {
        this.Message("请选择导入科室模板", "error");
        return;
      }
      let formFile = new FormData();
      formFile.append("file", this.file);
      this.loading = true;
      importData(this.deptId,formFile)
        .then(() => {
          this.loading = false;
          this.Message("上传成功");
          this.$emit("onBack", true);
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // 关闭
    cancel() {
      this.$emit("onBack", false);
    },
  },
};
</script>

<style lang="scss">
@import "../../../assets/styles/collect.scss";
.file-import {
  .form {
    margin-bottom: 0;
    padding: 20px;
    height: 280px;
    overflow-y: auto;
  }
  .el-form-item__label {
    width: 80px !important;
  }
  .el-form-item__content {
    margin-left: 80px !important;
  }
  .el-form-item {
    width: 100% !important;
  }
  .btns {
    margin: 20px 0;
    position: absolute;
    bottom: -110px;
    left: 0;
    background: #fff;
    padding-right: 20px;
  }
}
.dialog-import {
  .el-dialog__body {
    height: 360px;
    padding: 0;
  }
}

.uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.uploader .el-upload:hover {
  border-color: #409eff;
}
.uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>
